import { Button } from "@mui/material";
import React, { useState } from "react";
import "./index.less";
const checkImg = require("@/assets/images/user/choice_me.png");

interface IProp {
  data: IQuestionType;
}

const Type2Type: KeyMap = {
  check: "判断",
  one: "单选",
  many: "多选",
};

export default function Choice({ data }: IProp) {
  const list = JSON.parse(data.optionContent) as IQuetionType[];

  // 把 选中的 选项的 A,B,C,D 放进来
  const [userAnswers, setUserAnswers] = useState<string[]>([]);

  const checkAnswer = (value: string) => {
    if (data.questionType == "many") {
      // 如果是多选，点击的时候分两种情况
      // 取消勾选
      const index = userAnswers.indexOf(value);
      if (index > -1) {
        userAnswers.splice(index, 1);
        setUserAnswers([...userAnswers]);
      } else {
        // 勾选
        // 如果数组里面没有当前传入的答案，就是要勾选
        setUserAnswers([...userAnswers, value]);
      }
    } else {
      // 如果是单选 ， 让 数组里面只能有一个答案
      setUserAnswers([value]);
    }
  };

  return (
    <div className="choice">
      <section className="top">
        <div className="type">{Type2Type[data.questionType]}</div>
        <div className="title">{data.title}</div>
      </section>
      <section className="items">
        {list.map((item) => (
          <div
            className="choice-item"
            key={item.key}
            onClick={() => checkAnswer(item.key)}
          >
            <div className="check">
              <img
                style={{
                  display: userAnswers.includes(item.key) ? "block" : "none",
                }}
                src={checkImg}
                alt=""
              />
            </div>
            <div className="key">{item.key}</div>
            <div className="content">{item.value}</div>
          </div>
        ))}
      </section>
      <section className="anser-arear">
        <div>
          <Button variant="outlined">确定</Button>
        </div>
        <div>
          <p>参考答案</p>
          <p>A,D</p>
        </div>
      </section>
    </div>
  );
}
